<template>
  <div class="digital-resource-manager">
    <div class="resource-overview">
      <Row :gutter="16">
        <Col :span="6">
          <Card title="文件资源" :bordered="false">
            <div class="stat-item">
              <div class="stat-number">{{ stats.fileResources }}</div>
              <div class="stat-label">文件数量</div>
            </div>
          </Card>
        </Col>
        <Col :span="6">
          <Card title="文档资源" :bordered="false">
            <div class="stat-item">
              <div class="stat-number">{{ stats.documentResources }}</div>
              <div class="stat-label">文档数量</div>
            </div>
          </Card>
        </Col>
        <Col :span="6">
          <Card title="数据资源" :bordered="false">
            <div class="stat-item">
              <div class="stat-number">{{ stats.dataResources }}</div>
              <div class="stat-label">数据集数量</div>
            </div>
          </Card>
        </Col>
        <Col :span="6">
          <Card title="存储使用" :bordered="false">
            <div class="stat-item">
              <div class="stat-number">{{ stats.storageUsage }}GB</div>
              <div class="stat-label">已用存储</div>
            </div>
          </Card>
        </Col>
      </Row>
    </div>

    <div class="resource-list">
      <Card title="数字资源列表" :bordered="false">
        <div class="placeholder-content">
          <IconifyIcon icon="mdi:file-document" size="48" />
          <p>数字资源管理功能开发中...</p>
        </div>
      </Card>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { reactive } from 'vue';
import { Card, Col, Row } from 'ant-design-vue';
import { IconifyIcon } from '@vben/icons';

const stats = reactive({
  fileResources: 1247,
  documentResources: 856,
  dataResources: 234,
  storageUsage: 156.8,
});
</script>

<style scoped>
.digital-resource-manager {
  padding: 20px;
}

.resource-overview {
  margin-bottom: 24px;
}

.stat-item {
  padding: 20px 0;
  text-align: center;
}

.stat-number {
  margin-bottom: 8px;
  font-size: 28px;
  font-weight: bold;
  color: #1890ff;
}

.stat-label {
  font-size: 14px;
  color: #666;
}

.resource-list {
  margin-bottom: 24px;
}

.placeholder-content {
  padding: 60px 20px;
  color: #999;
  text-align: center;
}

.placeholder-content p {
  margin-top: 16px;
  font-size: 16px;
}
</style>
